<template>
  <a-card>
    <ContentHeader />
    <div class="table-action">
      <a-button v-if="auth('add')" @click="add">新增</a-button>
    </div>
    <a-table
      rowKey="grade_id"
      :columns="columns"
      :data-source="data.list"
      :pagination="{
        total: total,
        current: from.page,
        pageSize: pageSize,
      }"
      @change="handleTableChange"
    >
      <template #level="value">
        {{value.record.level}}级
      </template>
      <template #min_expend_money="value">
        最低消费{{value.record.min_expend_money}}元
      </template>
      <template #action="value">
        <a v-if="auth('edit')" @click="edit(value.record)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="auth('delete')" @click="deletesfun(value.record)">删除</a>
      </template>
    </a-table>
    <addForm @okCallback="okCallback" ref="adds" />
    <editForm @okCallback="okCallback" ref="edits" />
  </a-card>
</template>
<script>
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { list,deletes } from "@/api/user/Grade";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { notice,auth,refreshScrollTop } from "@/config";
import addForm from "./module/addGrade";
import editForm from "./module/editGrade";
export default defineComponent({
  components: {
    addForm,
    editForm,
  },
  setup() {
    const columns = [
      {
        key: "grade_id",
        title: "等级ID",
        dataIndex: "grade_id",
      },
      {
        key: "name",
        title: "等级名称",
        dataIndex: "name",
      },
      {
        title: "级别",
        dataIndex: "level",
        slots: {
          customRender: "level",
        },
      },
      {
        title: "条件",
        dataIndex: "min_expend_money",
        slots: {
          customRender: "min_expend_money",
        },
      },
      {
        title: "创建时间",
        dataIndex: "create_time",
      },
      {
        key: "action",
        title: "操作",
        slots: {
          customRender: "action",
        },
      },
    ];

    // 定义动态数据
    const state = reactive({
      data: [],
      adds: undefined,
      edits: undefined,
      pageSize: 15,
      total: 0,
      from: {
        page:1,
        // search: "",
        // grade_id:0,
        // create_time:[],
      },
    });

    // 获取数据
    const getTable = (where) => {
      list(where).then((res) => {
        state.data = res.data;
        state.total = res.data.total;
        state.pageSize = res.data.listRows;
      });
    };
    getTable([]);

    

    // 分页查询
    const handleTableChange = (pag) => {
      state.from.page = pag.current;
      getTable(state.from)
      // 重置滚动高度
      refreshScrollTop()
    }

    // 新增菜单
    const add = () => {
      state.adds.show();
    }
    // 编辑菜单
    const edit = (item) => {
      state.edits.show(item)
    }

    // 删除菜单
    const deletesfun = (item) => {
      Modal.confirm({
        title: () =>
          "你真的要删除(名称:" +
          item.name +
          ",ID:" +
          item.grade_id +
          ")这条记录吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "注意：确定删除后不可恢复",
        okText: () => "确定删除",
        okType: "danger",
        cancelText: () => "取消操作",
        onOk() {
          deletes({ grade_id: item.grade_id }).then((res) => {
            getTable();
            notice(res.status == 200 ? "success" : "error", res.message);
          });
        },
        onCancel() {},
      });
    };

    // 新增成功回调
    const okCallback = () => {
      getTable();
    };
    return {
      ...toRefs(state),
      columns,
      add,
      edit,
      deletesfun,
      okCallback,
      handleTableChange,
      auth,
    };
  },
});
</script>
<style scoped>
.popover-button {
  margin-right: 5px;
  padding: 0 5px;
  font-size: 12px;
}
</style>
